<!--所有文章列表 左侧导航部分-->
<template>
  <div class="article_list_nav">
    <el-menu
        background-color="#4A63E7"
        text-color="#fff"
        active-text-color="#ffd04b"
        class="el-menu-vertical-demo">
      <el-menu-item v-for="(obj,index) in cate_list" :index=index.toString() :key=index.toString()
                    @click="selectCate(obj.code)">
        <svg class="icon" aria-hidden="true">
          <use v-bind:xlink:href="'#icon-'+obj.code"></use>
        </svg>
        <span slot="title">{{ obj.cate }}</span>
      </el-menu-item>

    </el-menu>
  </div>
</template>

<script>
import {getArticleCateAPI} from "@/components/utils/api";

export default {
  name: "nav_article_list",

  mounted() {
    document.title = 'Loading... - ExtraXue | Homepage'
    this.getArticleCate()
  },

  data() {
    return {
      cate_list: []
    }
  },

  methods: {
    getArticleCate() {
      getArticleCateAPI().then(res => {
        if (res.res_status === 200) {
          res.note_menu_cate.map(val => {
            let obj = {}
            obj.cate = val.menu_name
            obj.code = val.menu_code
            this.cate_list.push(obj)
          })
          document.title = '所有文章 - ExtraXue | Homepage'
        }
      }).catch(err => {
        console.error(err)
      })
    },
    selectCate(cate) {
      let q = {
        cate: cate
      }
      this.$router.push({path: '/article_list', query: q});
    }
  }
}
</script>

<style scoped>
.article_list_nav {
  margin-top: 20px;
}

.el-menu-item {
  font-size: 16px;
  /*font-weight: bold;*/
}

.icon {
  font-size: 24px;
  width: 1em;
  height: 1em;
  fill: currentColor;
  overflow: hidden;
  margin: 5px;
}
</style>